<template>
	<view class="warp">
		<!-- 搜索 start -->
		<TopSearch></TopSearch>
		<!-- 搜索 end -->
		<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
		<!-- banner start -->
		<view class="banner">
			<uv-swiper :list="banner" @click="banner_jump" keyName="image" indicator indicatorMode="dot" height="25vh" radius="0" interval="4000" circular></uv-swiper>
		</view>
		<!-- banner end -->
		<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
		<!-- 通知 start -->
		<!-- <view class="notice" v-if="notice.length > 0">
			<uv-notice-bar :text="notice" @click="clickNotice" direction="column" mode="link"></uv-notice-bar>
		</view> -->
		<!-- 通知 end -->
		<!-- icon导航 start -->
		<view class="navigation">
			<uv-grid :border="false" col="4">
				<uv-grid-item v-for="(item,index) in navi_rows" :key="index" @click="jumpUrl(`/pages/category/index?type_id=${item.pid}&type2_id=${item.id}&category_name=${item.name}`)">
					<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.image" :size="55"></uv-icon>
					<view class="grid-text line_1">{{item.name}}</view>
				</uv-grid-item>
			</uv-grid>
		</view>
		<!-- icon导航 end -->
		<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
		<!-- 精品课程 start -->
		<view class="course_box">
			<view class="title_box">
				<view class="course_title">
					<view class="course_text">
						最新课程
					</view>
				</view>
				<view class="course_more" @click="jumpUrl('/pages/category/index')">
					更多 >
				</view>
			</view>
			<view class="course_list">
				<view class="course_item" v-for="(v,k) in course_rows" :key="k" @click="handleCourseItem(v)">
					<view class="course_img_box">
						<image :src="v.image" mode="aspectFill"></image>
						<view class="course_click">
							<!-- <uv-icon name="play-circle" color="#fff" size="18"></uv-icon> -->
							<text>{{v.study_num}}</text>人已学习
						</view>
						<view class="course_text line_2">
							<view>{{v.name}}</view>
							<view class="content">
								<text class="t2">{{ v.type }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 培训计划 end -->
		<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
		<!-- 培训计划 start -->
		<view class="course_box">
			<view class="title_box">
				<view class="course_title">
					<view class="course_text">
						培训计划
					</view>
				</view>
				<view class="course_more" @click="jumpUrl('/pages/category/index')">
					更多 >
				</view>
			</view>
			<view class="course_list">
				<view class="course_item" v-for="(v,k) in planning_rows" :key="k" @click="handleTrainningItem(v)">
					<view class="course_img_box" >
						<image :src="v.image" mode="aspectFill"></image>
						<view class="course_click">
							<!-- <uv-icon name="play-circle" color="#fff" size="18"></uv-icon> -->
							<text>{{v.study_num}}</text>人已学习
						</view>
						<view class="course_text line_2">
							<view>
								{{v.name}}
								<text v-if="v.status == 3" class="plan-complete">已完成</text>
							</view>
							<view class="content">
								<text class="t2">{{ v.type }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <uv-gap height="10" bgColor="#F1F1F5"></uv-gap> -->
		<!-- 测试试卷 start 
		<view class="test_box">
			<view class="title_box">
				<view class="author_title">
					<view class="author_text">
						最新考试
					</view>
				</view>
				<view class="author_more" @click="jumpUrl('/pages/test/index')">
					查看全部 >
				</view>
			</view>
			<view class="test_list">
				<view class="test_item" v-for="(v,k) in test_rows" :key="k">
					<view class=" test_item_row" @click="jumpUrl('/pages/test/details?id='+v.id)">
						<uv-icon name="order" color="#79b1fe" size="24"></uv-icon>
						<view class="test_item_title line_1">
							{{v.title}}
						</view>
					</view>
				</view>
			</view>
		</view>-->
		<!-- 测试试卷 end -->
		<!-- <uv-gap height="10" bgColor="#F1F1F5"></uv-gap> -->
		<!-- 底部信息 start -->
		<!-- <view class="bottom_box">
			<view class="bottom_item">{{addonConfig.beian}}</view>
			<view class="bottom_item" v-if="addonConfig.gabeian">
				<uv-icon :name="IMG_URL + 'ghs.png'" size="22"></uv-icon>
				{{addonConfig.gabeian}}
			</view>
		</view> -->
		<!-- 底部信息 end -->
		<!-- 底部tabbar start -->
		<bastTabbar :tabbar_index="0"></bastTabbar>
		<!-- 底部tabbar end -->
		<!-- <uv-back-top :scroll-top="scrollTop" icon="arrow-up" z-index="1000" top="200"></uv-back-top> -->
	</view>
</template>

<script>
	import bastTabbar from '@/component/base-tabbar.vue'
	import TopSearch from "@/component/top-search.vue"
	export default {
		components: {
			bastTabbar,TopSearch
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		data() {
			return {
				scrollTop: 0,
				banner:[],
				notice: [],
				notice_rows: [],
				navi_rows: [],
				course_rows: [],
				planning_rows: [],
				teachers: [],
				test_rows: [],
				value: 0,
				addonConfig: {},
				IMG_URL: this.$IMG_URL,
			}
		},
		onLoad() {
			this.init()
		},
		filters: {
			/**
			 * 秒 转 (分、时、天)
			 */
			secondsConvertX(seconds) {
			        if (!seconds) return '- 秒';
			
			        if (seconds < 60) return `${seconds}秒`;
			        else if (seconds >= 60 && seconds < 60 * 60) {
			            const m = Math.floor(seconds / 60);
			            const s = seconds % 60;
			            let res = `${m}分`;
			            if (s > 0) res += `${s}秒`;
			            return res;
			        }
			        else if (seconds >= 60 * 60 && seconds < 60 * 60 *24) {
			            const x1 = Math.floor(seconds / 60 / 60);
			            const x2 = seconds % (60 * 60);
			            const h = x1;
			            const m = Math.floor(x2 / 60);
			            const s = x2 % 60;
			
			            let res = `${h}时`;
			            if (m > 0) res += `${m}分`;
			            if (s > 0)  res += `${s}秒`;
			            
			            return res;
			        }
			        else {
			            const x1 = Math.floor(seconds / 60 / 60 / 24);
			            const x2 = seconds % (60 * 60 * 24);
			            const d = x1;
			            const h = Math.floor(x2 / (60 * 60));
			            const x3 = x2 % (60 * 60);
			            const m = Math.floor(x3 / 60);
			            const s = x3 % 60;
			            
			            let res = `${d}天`;
			            if (h > 0) res += `${h}时`;
			            if (m > 0) res += `${m}分`;
			            if (s > 0)  res += `${s}秒`;
			            
			            return res;
			        }
			 }
		},
		methods: {
			async init() {
				const res = await this.$myRequest({
					url: "common/init",
					type: "post",
					data: {}
				});
				if(res.code === 1){
					this.banner = res.data.banner
					this.course_rows = res.data.course_rows
					this.planning_rows = res.data.planning_rows
					this.navi_rows = res.data.navi
					this.teachers = res.data.teachers
					this.test_rows = res.data.test_rows
					this.addonConfig = res.data.addonConfig
					
					this.notice = res.data.notice
					this.notice_rows = res.data.notice_rows
					
					
				}
			},
			clickNotice(index) {
				let id = this.notice_rows[index]['id']
				console.log(id)
				uni.navigateTo({
					url: "/pages/article/details?id=" + id
				})
			},
			banner_jump(index) {
				console.log(this.banner[index].url)
				let url = this.banner[index].url
				if (url.indexOf('http') != -1) {
					// #ifdef MP-WEIXIN
					url = encodeURIComponent(url)
					this.jumpUrl("/pages/webview/webview?urlstr="+url)
					// #endif
					// #ifdef WEB
					location.href = url
					// #endif
					return;
				} else {
					this.jumpUrl(url)
				}
			},
			/**
			 * 点击跳转具体的课程
			 */
			handleCourseItem(item) {
				const { name, id } = item;
				this.jumpUrl('/pages/course/details?id='+id)
			},
			/**
			 * 点击跳转具体的课程
			 */
			handleTrainningItem(item) {
				const { name, id } = item;
				this.jumpUrl('/pages/planning/details?id='+id)
			}
		}
	}
</script>

<style lang="scss">
	.warp {
		background-color: #FFF;
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;
		// banner
		.banner{
			// max-height: 800rpx;
		}
		.navigation{
			padding: 20rpx 0;
			.grid-text {
				margin-top: 10rpx;
				font-size: 14px;
				color: #909399;
				width: 100%;
				text-align: center;
			}
		}
		// 名师风采
		.author_box {
			padding: 0 20rpx;
			margin-top: 30rpx;
			.title_box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px dashed #909399;
				padding-bottom: 30rpx;
				.author_title{
					display: flex;
					align-items: center;
					.author_img{
						margin-right: 18rpx;
					}
					.author_text{
						font-size: 32rpx;
						font-weight: bold;
					}
				}
				.author_more{
					color: #969696;
					font-size: 26rpx;
				}
			}
			.author_list{
				padding: 20rpx 0 20rpx 0;
				.grid_box{
					padding: 20rpx;
					image{
						border-radius: 50%;
						width: 200rpx;
						height: 200rpx;
						border: 2px solid #ccc;
					}
					.grid-text{
						margin-top: 10rpx;
						text-align: center;
					}
				}
			}
		}
		// 精品课程
		.course_box{
			padding: 0 20rpx;
			margin-top: 30rpx;
			.title_box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px dashed #909399;
				padding-bottom: 30rpx;
				.course_title{
					display: flex;
					align-items: center;
					.course_img{
						margin-right: 18rpx;
					}
					.course_text{
						font-size: 32rpx;
						font-weight: bold;
					}
				}
				.course_more{
					color: #969696;
					font-size: 26rpx;
				}
			}
			.course_list{
				margin-top: 20rpx;
				padding-bottom: 10rpx;
				// display: grid;
				// grid-template-columns: repeat(auto-fill, minmax(calc(50% - 30rpx), 1fr));
				// grid-gap: 30rpx;
				display: flex;
				flex-direction: column;
				
				.course_item{
					border-bottom: 1rpx dashed #dcdcdc;
					margin-bottom: 5rpx;
					padding-bottom: 20rpx;
					
					&:last-child {
						border-bottom: none;
					}
					
					.course_img_box{
						position: relative;
						display: flex;
						.course_click{
							display: flex;
							align-items: center;
							position: absolute;
							right: 0;
							bottom: 0;
							// background-color: rgba(0, 0, 0, 0.6);
							border-radius: 10rpx;
							padding: 4rpx 10rpx;
							font-size: 24rpx;
							color: gray;
							text{
								margin-left: 8rpx;
							}
						}
						image{
							border-radius: 6rpx 6rpx 0 0;					
							width: 200rpx;
							height: 200rpx;
							// border: 1px solid #eee;
							padding: 10rpx;
						}
					}
					.course_text{
						flex: 1;
						padding: 20rpx 20rpx;
						margin-bottom: 40rpx;
						font-size: 28rpx;
						color: #333;
						
						.plan-complete {
							padding: 4rpx 8rpx;
							margin-left: 10rpx;
							border-radius: 10rpx;
							font-size: 28rpx;
							background: #80C269;
							color: white;
						}
						
						.content {
							padding: 10rpx 0;
							font-size: 24rpx;
							.t1 {
								color: gray;
								margin-right: 15rpx;
							}
							
							.t2 {
								color: gray;
							}
						}
					}
				}
			}
		}
		// 测试试卷
		.test_box {
			padding: 0 20rpx 40rpx 20rpx;
			margin-top: 30rpx;
			.title_box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px dashed #909399;
				padding-bottom: 30rpx;
				.author_title{
					display: flex;
					align-items: center;
					.author_img{
						margin-right: 18rpx;
					}
					.author_text{
						font-size: 32rpx;
						font-weight: bold;
					}
				}
				.author_more{
					color: #969696;
					font-size: 26rpx;
				}
			}
			.test_list{
				padding: 20rpx 0 20rpx 0;
				font-size: 30rpx;
				.test_item{
					padding: 20rpx 0;
					border-bottom: 1px dashed #909399;
					.test_item_row{
						display: flex;
						align-items: center;
						.test_item_title{
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		// 底部信息
		.bottom_box{
			color: #9499a0;
			background-color: #F1F1F5;
			padding: 10rpx 10rpx 40rpx 10rpx;
			.bottom_item{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 10rpx;
			}
		}
	}
</style>